import React, { Component } from 'react'
import Header from '../../components/Header/Header'
// import { reqregister } from '../../http/api'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { connect } from "react-redux";
import { getUser, actions } from "../../store/modules/register";
import { bindActionCreators } from "redux";

 class Register extends Component {
  render() {
    let { user,r:{changeUser,doRegister},history:{push} } = this.props
    return (
      <div>
        <Header back title="注册"></Header>
        {/* <div>user:{JSON.stringify(user)}</div> */}
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input
              placeholder='请输入手机号'
              clearable
              onChange={(value) => { changeUser( "phone",value) }}
            />
          </Form.Item>

          <Form.Item label='昵称' name='nickname'>
            <Input
              placeholder='请输入昵称'
              clearable
              onChange={(value) => { changeUser( "nickname",value) }}
            />
          </Form.Item>

          <Form.Item label='密码' name='password'>
            <Input
              placeholder='请输入密码'
              clearable type='password'
              onChange={(value) => { changeUser( "password",value) }}
            />
          </Form.Item>
          <Button block color='danger' size='large'
          onClick={()=>{doRegister(push)}}
          >注册</Button>
        </Form>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    user: getUser(state),
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    r: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Register);

